<template>
  <div class="sessionWindowBox">
    <styleSolt @saveFun="saveFun" :isShowSaveAs="isShowSaveAs">
      <template slot="content">
        <windowStyle>
          <template slot="content">
            <div class="previewOutBox">
            <div class="previewBox" :style="{maxWidth: styleTemp === 'advert' ? '660px' : '360px'}">
              <div class="header" :class="{defaultHeadColor: sessionWindowForm.windowColor === '#008BEE'}"
                 :style="{ background: sessionWindowForm.windowColor !== '#008BEE' ? sessionWindowForm.windowColor: '' }">
                <div class="headerImg">
                  <img class="icon" :src="initConfig + sessionWindowForm.companyLogo" alt="" v-if="initConfig && sessionWindowForm.companyLogo">
                  <div class="icon" v-else></div>
                </div>
                <div class="HeadTitle">
                  <p>工号25464</p><p>{{sessionWindowForm.companyName || ''}}</p>
                </div>
                <div class="headBtn"><span>-</span><span>x</span></div>
              </div>
              <div class="middle clearfix">
                <div class="fl advertBox" v-if="styleTemp === 'advert'">
                  <el-carousel
                   v-if="initConfig && sessionWindowForm.leftTopAdvert.images[0].image !=='' &&
                   sessionWindowForm.isLeftTopLocation && sessionWindowForm.leftTopAdvert.displayType === 'images'"
                   autoplay
                   :interval="5000"
                   indicator-position="none"
                   arrow="never">
                    <el-carousel-item v-for="(item, index) in sessionWindowForm.leftTopAdvert.images" :key="index">
                      <img class="advertImgBox" :src="initConfig + item.image" alt="">
                    </el-carousel-item>
                  </el-carousel>
                  <iframe class="iframe" :src="iframeUrl.leftTopAdvert" frameborder="0"
                    v-else-if="sessionWindowForm.isLeftTopLocation && iframeUrl.leftTopAdvert
                    && sessionWindowForm.leftTopAdvert.displayType === 'iframe'">
                  </iframe>
                  <div v-else class="leftAdvertBox">左侧广告区域</div>
                </div>
                <div class="fl" style="height: 100%" :style="{width: styleTemp === 'advert' ? 'calc(100% - 300px)' : ''}">
                  <div class="container">
                    <ul>
                      <li v-for="(item, index) in history" :key="index" class="msg">
                        <div v-if="item.type ==='system'" class="systemMsg">
                          {{item.msg}}
                        </div>
                        <div v-else>
                          <img v-if="initConfig && sessionWindowForm.systemHead && item.type === 'in'"
                            :src="initConfig + sessionWindowForm.systemHead" alt="" class="headImg fl">
                          <img src="../../../../../assets/img/userAgent.png" alt="" class="headImg" :class="item.type === 'in' ? 'fl' : 'fr'" v-else>
                          <div :class="item.type === 'in' ? 'fl inBox' : 'fr outBox'"
                            :style="{background: item.type === 'out' ? sessionWindowForm.windowColor : '#EFEFEF'}">
                            {{item.msg}}
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <div class="sendMsg">
                    <p class="sendMsgBtn">
                      <span v-for="(item, index) in sendMsgBtn" :key="index" class="V7_iconfont" :class="item"></span>
                    </p>
                    <p style="marginBottom: 7px;">请输入您想咨询的问题</p>
                  </div>
                </div>
                <div class="fl advertBox" v-if="styleTemp === 'advert'">
                  <div class="advertRightTopBox">
                    <el-carousel
                      v-if="initConfig && sessionWindowForm.rightTopAdvert.images[0].image &&
                      sessionWindowForm.isRightTopLocation && sessionWindowForm.rightTopAdvert.displayType === 'images'"
                      autoplay
                      :interval="5000"
                      indicator-position="none"
                      arrow="never">
                      <el-carousel-item v-for="(item, index) in sessionWindowForm.rightTopAdvert.images" :key="index">
                        <img class="advertImgBox" :src="initConfig + item.image" alt="">
                      </el-carousel-item>
                    </el-carousel>
                    <iframe class="iframe" :src="iframeUrl.rightTopAdvert" frameborder="0"
                      v-else-if="sessionWindowForm.isRightTopLocation && iframeUrl.rightTopAdvert
                      && sessionWindowForm.rightTopAdvert.displayType === 'iframe'">
                    </iframe>
                    <div class="rightTopEmptyBox" v-else>右上侧广告区域</div>
                  </div>
                  <div class="advertRightBottomBox">
                    <el-carousel
                      v-if="initConfig && sessionWindowForm.rightBottomAdvert.images[0].image &&
                      sessionWindowForm.isRightBottomLocation && sessionWindowForm.rightBottomAdvert.displayType === 'images'"
                      :interval="5000"
                      indicator-position="none"
                      arrow="never">
                      <el-carousel-item v-for="(item, index) in sessionWindowForm.rightBottomAdvert.images" :key="index">
                        <img class="advertImgBox" :src="initConfig + item.image" alt="">
                      </el-carousel-item>
                    </el-carousel>
                    <iframe class="iframe" :src="iframeUrl.rightBottomAdvert" frameborder="0"
                      v-else-if="sessionWindowForm.isRightBottomLocation && iframeUrl.rightBottomAdvert
                      && sessionWindowForm.rightBottomAdvert.displayType === 'iframe'">
                    </iframe>
                    <div v-else class="rightBottomEmptyBox">右下侧广告区域</div>
                  </div>
                </div>
              </div>
              <!-- <div class="footer" v-if="!$store.state.oem.oemFlag">
                <img class="logo" src="../../../../../assets/img/logo.png"/>
                容联七陌提供技术支持
              </div> -->
              <div class="footer"></div>
            </div>
            </div>
          </template>
        </windowStyle>
      </template>
      <template slot="edit">
        <el-form class="m7-form sessionWindowForm" :rules="rules"
          size="mini" :model="sessionWindowForm"
          ref="sessionWindowForm" label-position="top">
          <el-form-item label="企业简称" prop="companyName">
            <el-input v-model.trim="sessionWindowForm.companyName" placeholder="请输入企业简称" size="mini"></el-input>
          </el-form-item>
          <el-form-item prop="systemHead">
            <span slot="label">
              系统消息头像
              <span class="adviceColor">（建议尺寸：30*30）</span>
            </span>
            <img class="agentImg" v-if="initConfig && sessionWindowForm.systemHead" :src="initConfig + sessionWindowForm.systemHead" alt="">
            <icon-svg :icon-class="'tupian'" class="agentImg" v-else></icon-svg>
            <el-upload
              class="upLoad"
              :show-file-list="false"
              accept=".jpg, .gif, .png, .bmp"
              action=""
              :on-success="systemUploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload"
              :http-request="uploadRequest">
              <span>上传图片</span>
            </el-upload>
            <span v-if="initConfig && sessionWindowForm.systemHead">
              <span class="line"></span>
              <span class="delImg" @click="delSystemImgFun({imgUrl: sessionWindowForm.systemHead, type: 'systemHead'})">删除</span>
            </span>
          </el-form-item>
          <el-form-item prop="companyLogo">
            <span slot="label">
              企业Logo
              <span class="adviceColor">（建议尺寸：40*40）</span>
            </span>
            <img class="agentImg" v-if="initConfig && sessionWindowForm.companyLogo" :src="initConfig + sessionWindowForm.companyLogo" alt="">
            <icon-svg :icon-class="'tupian'" class="agentImg" v-else></icon-svg>
            <el-upload
              class="upLoad"
              :show-file-list="false"
              accept=".jpg, .gif, .png, .bmp"
              action=""
              :on-success="logoUploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload"
              :http-request="uploadRequest">
              <span>上传图片</span>
            </el-upload>
            <span v-if="initConfig && sessionWindowForm.companyLogo">
              <span class="line"></span>
              <span class="delImg" @click="delSystemImgFun({imgUrl: sessionWindowForm.companyLogo, type: 'companyLogo'})">删除</span>
            </span>
          </el-form-item>
          <el-form-item label="皮肤选择" prop="color">
            <el-color-picker class="colorChoose" size="small" @change="colorChange" v-model="sessionWindowForm.windowColor"></el-color-picker>
            <el-input class="colorIpt" v-model.trim="sessionWindowForm.windowColor" :disabled="true" size="mini"></el-input>
          </el-form-item>
          <div v-if="styleTemp === 'advert'">
            <el-form-item>
              <span slot="label">
                <el-checkbox v-model="sessionWindowForm.isLeftTopLocation">左侧广告</el-checkbox><span class="prompt">（建议尺寸：150*500）</span>
              </span>
              <div v-show="sessionWindowForm.isLeftTopLocation" class="advertSettingBox clearfix">
                <el-radio v-model="sessionWindowForm.leftTopAdvert.displayType" label="images">图片广告</el-radio>
                <span class="imgUploadTip">（最多上传3张，滚动展示）</span>
                <div v-if="initConfig && sessionWindowForm.leftTopAdvert.images.length > 0 && sessionWindowForm.leftTopAdvert.images[0].image">
                  <div class="advertImgContent fl" v-for="(item, index) in sessionWindowForm.leftTopAdvert.images" :key="index">
                    <img class="advertImgBox" :src="initConfig + item.image" alt="">
                    <div class="advertEdit">
                      <span class="closeImg fr V7_iconfont V7_iconV7tubiao_guanbi" @click="delImgFun({type: 'leftTopAdvert', index, item })"></span>
                      <p class="editUrl" @click="editUrlFun('leftTopAdvert', index)"><span class="V7_iconfont V7_iconV7tubiao_xianbianji"></span></p>
                    </div>
                  </div>
                </div>
                <div class="clearfix">
                  <el-upload
                    v-if="sessionWindowForm.leftTopAdvert.images && sessionWindowForm.leftTopAdvert.images.length < 3"
                    class="advertUpLoad fl"
                    :show-file-list="false"
                    accept=".jpg, .gif, .png, .bmp"
                    action=""
                    :on-success="LeftAdvertUploadSuccess"
                    :on-error="uploadError"
                    :before-upload="beforeUpload"
                    :http-request="uploadRequest">
                    <span class="V7_iconfont V7_iconV7tubiao_xinzeng"></span>
                    <span>上传图片</span>
                  </el-upload>
                </div>
                <el-input
                  v-show="isShowImgUrl.leftTopAdvert"
                  style="margin: 10px 0px"
                  v-model.trim="sessionWindowForm.leftTopAdvert.images[editUrlIndex.leftTopAdvert].url"
                  placeholder="跳转链接（需https链接）"
                  size="mini">
                </el-input>
                <el-radio v-model="sessionWindowForm.leftTopAdvert.displayType" label="iframe">网页嵌入</el-radio>
                <el-tooltip class="item" effect="dark" content="企业可嵌入内部开发网页地址" placement="top">
                  <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                </el-tooltip>
                <el-input
                  style="marginTop: 10px"
                  v-model.trim="sessionWindowForm.leftTopAdvert.iframe"
                  placeholder="页面地址（需https链接）"
                  @change="iframeIptFun($event, 'leftTopAdvert')"
                  size="mini">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-checkbox v-model="sessionWindowForm.isRightTopLocation">右上侧广告</el-checkbox><span class="prompt">（建议尺寸：150*340）</span>
              </span>
              <div v-show="sessionWindowForm.isRightTopLocation" class="advertSettingBox clearfix">
                <el-radio v-model="sessionWindowForm.rightTopAdvert.displayType" label="images">图片广告</el-radio>
                <span class="imgUploadTip">（最多上传3张，滚动展示）</span>
                <div v-if="initConfig && sessionWindowForm.rightTopAdvert.images.length > 0 && sessionWindowForm.rightTopAdvert.images[0].image">
                  <div class="advertImgContent fl" v-for="(item, index) in sessionWindowForm.rightTopAdvert.images" :key="index">
                    <img class="advertImgBox fl" :src="initConfig + item.image" alt="">
                    <div class="advertEdit">
                      <span class="closeImg fr V7_iconfont V7_iconV7tubiao_guanbi" @click="delImgFun({type: 'rightTopAdvert', index, item })"></span>
                      <p class="editUrl" @click="editUrlFun('rightTopAdvert', index)"><span class="V7_iconfont V7_iconV7tubiao_xianbianji"></span></p>
                    </div>
                  </div>
                </div>
                <div class="clearfix">
                  <el-upload
                    v-if="sessionWindowForm.rightTopAdvert.images && sessionWindowForm.rightTopAdvert.images.length < 3"
                    class="advertUpLoad fl"
                    :show-file-list="false"
                    accept=".jpg, .gif, .png, .bmp"
                    action=""
                    :on-success="rightAdvertTopUploadSuccess"
                    :on-error="uploadError"
                    :before-upload="beforeUpload"
                    :http-request="uploadRequest">
                    <span class="V7_iconfont V7_iconV7tubiao_xinzeng"></span>
                    <span>上传图片</span>
                  </el-upload>
                </div>
                <el-input
                  v-show="isShowImgUrl.rightTopAdvert"
                  style="margin: 10px 0px"
                  v-model.trim="sessionWindowForm.rightTopAdvert.images[editUrlIndex.rightTopAdvert].url"
                  placeholder="跳转链接（需https链接）" size="mini">
                </el-input>
                <el-radio v-model="sessionWindowForm.rightTopAdvert.displayType" label="iframe">网页嵌入</el-radio>
                <el-tooltip class="item" effect="dark" content="企业可嵌入内部开发网页地址" placement="top">
                  <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                </el-tooltip>
                <el-input
                  style="marginTop: 10px"
                  v-model.trim="sessionWindowForm.rightTopAdvert.iframe"
                  placeholder="页面地址（需https链接）"
                  @change="iframeIptFun($event, 'rightTopAdvert')"
                  size="mini">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                <el-checkbox v-model="sessionWindowForm.isRightBottomLocation">右下侧广告</el-checkbox><span class="prompt">（建议尺寸：150*160）</span>
              </span>
              <div v-show="sessionWindowForm.isRightBottomLocation" class="advertSettingBox clearfix">
                <el-radio v-model="sessionWindowForm.rightBottomAdvert.displayType" label="images">图片广告</el-radio>
                <span class="imgUploadTip">（最多上传3张，滚动展示）</span>
                <div v-if="initConfig && sessionWindowForm.rightBottomAdvert.images.length > 0 && sessionWindowForm.rightBottomAdvert.images[0].image">
                  <div class="advertImgContent fl" v-for="(item, index) in sessionWindowForm.rightBottomAdvert.images" :key="index">
                    <img class="advertImgBox fl" :src="initConfig + item.image" alt="">
                    <div class="advertEdit">
                      <span class="closeImg fr V7_iconfont V7_iconV7tubiao_guanbi" @click="delImgFun({type: 'rightBottomAdvert', index, item})"></span>
                      <p class="editUrl" @click="editUrlFun('rightBottomAdvert', index)"><span class="V7_iconfont V7_iconV7tubiao_xianbianji"></span></p>
                    </div>
                  </div>
                </div>
                <div class="clearfix">
                  <el-upload
                    v-if="sessionWindowForm.rightBottomAdvert.images && sessionWindowForm.rightBottomAdvert.images.length < 3"
                    class="advertUpLoad fl"
                    :show-file-list="false"
                    accept=".jpg, .gif, .png, .bmp"
                    action=""
                    :on-success="rightAdvertBottomUploadSuccess"
                    :on-error="uploadError"
                    :before-upload="beforeUpload"
                    :http-request="uploadRequest">
                    <span class="V7_iconfont V7_iconV7tubiao_xinzeng"></span>
                    <span>上传图片</span>
                  </el-upload>
                </div>
                <el-input
                  v-show="isShowImgUrl.rightBottomAdvert"
                  style="margin: 10px 0px"
                  v-model.trim="sessionWindowForm.rightBottomAdvert.images[editUrlIndex.rightBottomAdvert].url"
                  placeholder="跳转链接（需https链接）" size="mini">
                </el-input>
                <el-radio v-model="sessionWindowForm.rightBottomAdvert.displayType" label="iframe">网页嵌入</el-radio>
                <el-tooltip class="item" effect="dark" content="企业可嵌入内部开发网页地址" placement="top">
                  <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                </el-tooltip>
                <el-input
                  style="marginTop: 10px"
                  v-model.trim="sessionWindowForm.rightBottomAdvert.iframe"
                  placeholder="页面地址（需https链接）"
                  @change="iframeIptFun($event, 'rightBottomAdvert')"
                  size="mini">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                广告语设置
                <el-tooltip class="item" effect="dark" content="企业可将最新活动、优惠信息等设为广告语，发送给访客，支持文本、图片、视频等" placement="top">
                  <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                </el-tooltip>
              </span>
              <setMessage
                ref="setMessage"
                :menus="
                  [
                    'head', 'bold', 'fontSize', 'fontName', 'lineHeight', 'italic', 'underline', 'foreColor', 'backColor',
                    'list', 'justify', 'emoticon', 'image', 'video', 'splitLine', 'undo', 'redo'
                  ]"
                :placeholder="'请输入内容'"
                :value="advertContentObj"
                @input="messageObjChange">
              </setMessage>
            </el-form-item>
          </div>
          <el-form-item label="窗口打开方式" prop="openWay">
            <el-radio v-model="sessionWindowForm.openWay" label="self" class="selfRadio">浮层样式</el-radio>
            <el-radio v-model="sessionWindowForm.openWay" label="newTab">新窗口打开</el-radio>
            <img style="margin: 0px 32px 0px 24px" class="openWayImg fl" src="../../../../../assets/img/self.png" alt="">
            <img class="openWayImg fl" src="../../../../../assets/img/newTab.png" alt="" />
          </el-form-item>
        </el-form>
      </template>
    </styleSolt>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { uploadQiniu } from '@/utils/upload'
import windowStyle from '@/components/windowStyle/index.vue'
import styleSolt from '@/views/config/webchat/channel/base/styleSolt.vue'
import setMessage from '@/views/config/webchat/process/nodeEdit/common/setMessage.vue'
import { deepClone } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
interface SessionWindowObj {
  companyName: string,
  companyLogo: string,
  systemHead: string,
  windowColor: string,
  openWay: string,
  isRightTopLocation?: boolean,
  isLeftTopLocation?: boolean,
  rightTopAdvert?: any,
  leftTopAdvert?: any,
  isRightBottomLocation?: boolean
  rightBottomAdvert?: any
  advertContent?: string
  advertContentType?: string
}
const sessionWindowFormTem = {
  companyName: '',
  companyLogo: '',
  systemHead: '',
  windowColor: '#008BEE',
  openWay: 'self', // 窗口打开方式
  isLeftTopLocation: false, // 左侧广告
  isRightTopLocation: false, // 右侧广告
  isRightBottomLocation: false, // 右下侧广告
  advertContent: '', // 广告语内容设置
  advertContentType: 'ordinary',
  leftTopAdvert: { images: [{ image: '', url: '' }], url: '', iframe: '', displayType: 'images', heightPercent: 100 }, // 左侧广告配置
  rightTopAdvert: { images: [{ image: '', url: '' }], url: '', iframe: '', displayType: 'images', heightPercent: 66.66 }, // 右上侧广告配置
  rightBottomAdvert: { images: [{ image: '', url: '' }], url: '', iframe: '', displayType: 'images' } // 右下侧广告配置
}
@Component({
  name: 'sessionWindow',
  components: { windowStyle, styleSolt, setMessage }
})
export default class SessionWindow extends Vue {
  @Prop({ type: Boolean, default: () => false }) private isShowSaveAs
  @Prop({ default: () => 'system' }) private styleTemp: string | undefined
  private $message: any
  private $store: any
  private $bus: any

  private initConfig: string = ''

  private isShowImgUrl: any = { leftTopAdvert: false, rightTopAdvert: false, rightBottomAdvert: false } // 是否展示广告图片地址输入框

  private editUrlIndex: any = { leftTopAdvert: 0, rightTopAdvert: 0, rightBottomAdvert: 0 } // 修改图片地址索引

  private iframeUrl: any = { leftTopAdvert: '', rightTopAdvert: '', rightBottomAdvert: '' } // iframe展示地址

  private advertContentObj: any = { content: '', textType: 'ordinary' }

  private rules: any = {
    companyName: [{ required: true, trigger: 'blur', message: '请输入企业简称' }]
  }

  private fileName = '' // 上传文件名

  private sendMsgBtn = [ // 按钮图标
    'V7_iconV7tubiao_zaixian-biaoqing',
    'V7_iconV7tubiao_zaixian-tupian',
    'V7_iconV7tubiao_zaixian-wenjian',
    'V7_iconV7tubiao_fasong'
  ]

  private initHeadImg = require('../../../../../assets/img/userAgent.png') // 默认头像

  private selfImg = require('../../../../../assets/img/self.png')

  private history = [ // 聊天历史
    { type: 'system', msg: '今天 6:33' },
    { type: 'in', msg: '您好，人工客服在线时间是工作日9:00-19:00 我们将第一时间回复您的消息。' },
    { type: 'in', msg: '9:00-19:00' },
    { type: 'in', msg: '第一时间回复您的消息' },
    { type: 'out', msg: '我想咨询云客服产品' }
  ]

  public sessionWindowForm: SessionWindowObj = {
    companyName: '', // 企业名称
    companyLogo: '', // 企业logo
    systemHead: '', // 系统头像
    windowColor: '#008BEE', // 聊天框颜色
    isLeftTopLocation: false, // 左侧广告
    isRightTopLocation: false, // 右上侧广告
    isRightBottomLocation: false, // 右下侧广告
    openWay: 'self', // 窗口打开方式
    advertContent: '', // 广告语设置内容
    advertContentType: 'ordinary',
    leftTopAdvert: { images: [{ image: '', url: '' }], iframe: '', displayType: 'images', heightPercent: 100 }, // 左侧广告配置
    rightTopAdvert: { images: [{ image: '', url: '' }], iframe: '', displayType: 'images', heightPercent: 66.66 }, // 右上侧广告配置
    rightBottomAdvert: { images: [{ image: '', url: '' }], iframe: '', displayType: 'images' } // 右下侧广告配置
  }

  private systemUploadSuccess (data: any) { // 系统头像上传成功
    this.sessionWindowForm.systemHead = data.key ? `/${data.key}` : ''
  }

  private logoUploadSuccess (data: any) { // 企业logo上传成功
    this.sessionWindowForm.companyLogo = data.key ? `/${data.key}` : ''
  }

  private LeftAdvertUploadSuccess (data: any) { // 左侧广告上传成功
    if (!this.sessionWindowForm.leftTopAdvert.images[0].image) {
      this.sessionWindowForm.leftTopAdvert.images[0].image = data.key ? `/${data.key}` : ''
    } else {
      this.sessionWindowForm.leftTopAdvert.images.push({ image: data.key ? `/${data.key}` : '', url: '' })
    }
  }

  private rightAdvertTopUploadSuccess (data: any) { // 右上侧广告上传成功
    if (!this.sessionWindowForm.rightTopAdvert.images[0].image) {
      this.sessionWindowForm.rightTopAdvert.images[0].image = data.key ? `/${data.key}` : ''
    } else {
      this.sessionWindowForm.rightTopAdvert.images.push({ image: data.key ? `/${data.key}` : '', url: '' })
    }
  }

  private rightAdvertBottomUploadSuccess (data: any) { // 右下侧广告上传成功
    if (!this.sessionWindowForm.rightBottomAdvert.images[0].image) {
      this.sessionWindowForm.rightBottomAdvert.images[0].image = data.key ? `/${data.key}` : ''
    } else {
      this.sessionWindowForm.rightBottomAdvert.images.push({ image: data.key ? `/${data.key}` : '', url: '' })
    }
  }

  private uploadError () { // 上传失败
    this.$message({ message: '图片上传失败，请重新选择图片上传', type: 'error' })
  }

  private beforeUpload (file: any) { // 图片上传之前
    this.fileName = file.name.replace(/\s/g, '')
    if (file.size / 1024 / 1024 > 3) {
      this.$message({ message: '头像大小不能超过3M', type: 'error' })
      return false
    }
  }

  private editUrlFun (type: string, urlIndex: number) {
    Vue.set(this.isShowImgUrl, type, true)
    this.editUrlIndex[type] = urlIndex
  }

  private colorChange (val: string) { // 颜色选择器
    if (val === null) {
      this.sessionWindowForm.windowColor = '#008BEE'
    }
  }

  private iframeIptFun (val: string, type: string) {
    this.iframeUrl[type] = val
  }

  private uploadRequest (request: any) { // 七牛上传
    uploadQiniu({ type: 'im', fileName: this.fileName }, request)
  }

  private saveFun () { // 保存事件
    if ((this.$refs as any).setMessage) {
      (this.$refs as any).setMessage.refresh()
    }
    this.$emit('saveFun')
  }

  private delSystemImgFun (obj: any) {
    const sendData = { data: [{ key: obj.imgUrl, bucket: 'v7-fs-im' }] }
    const actionData = { url: '/base/action/qiniu/delete', method: 'POST', data: sendData }
    CommonModule.publicAction(actionData).then(res => {
      if (res && res.success) {
        this.sessionWindowForm[obj.type] = ''
      }
    })
  }

  private delImgFun (obj: any) { // 删除图片
    const sendData = { data: [{ key: obj.item.image, bucket: 'v7-fs-im' }] }
    const actionData = { url: '/base/action/qiniu/delete', method: 'POST', data: sendData }
    CommonModule.publicAction(actionData).then(res => {
      if (res && res.success) {
        if (this.sessionWindowForm[obj.type].images.length === 1) {
          this.sessionWindowForm[obj.type].images = [{ image: '', url: '' }]
        } else {
          this.sessionWindowForm[obj.type].images.splice(obj.index, 1)
        }
      }
    })
  }

  private messageObjChange (obj: any) { // 广告内容改变事件
    this.sessionWindowForm.advertContent = obj.content
    this.sessionWindowForm.advertContentType = obj.textType
  }

  private setSessionWindowData (data?: SessionWindowObj) {
    this.$nextTick(() => {
      if (data) {
        const {
          companyName,
          companyLogo,
          systemHead,
          windowColor,
          isLeftTopLocation,
          isRightTopLocation,
          leftTopAdvert,
          rightTopAdvert,
          rightBottomAdvert,
          isRightBottomLocation,
          openWay,
          advertContentType,
          advertContent
        }: any = data
        this.sessionWindowForm = {
          companyName, // 企业名称
          companyLogo, // 企业logo
          systemHead, // 系统头像
          windowColor, // 咨询框颜色
          isLeftTopLocation, // 是否开启左侧广告
          isRightTopLocation, // 是否开启右上侧广告
          isRightBottomLocation, // 是否开启右下侧广告
          openWay, // 窗口打开方式
          advertContent, // 广告语内容
          advertContentType,
          leftTopAdvert: deepClone(leftTopAdvert) || { url: [], image: [{ image: '', url: '' }], iframe: '', displayType: 'images' }, // 左侧广告信息
          rightTopAdvert: deepClone(rightTopAdvert) || { url: [], image: [{ image: '', url: '' }], iframe: '', displayType: 'images' }, // 右上侧广告信息
          rightBottomAdvert: deepClone(rightBottomAdvert) || { url: [], image: [{ image: '', url: '' }], iframe: '', displayType: 'images' } // 右下侧广告信息
        }
        this.iframeUrl.leftTopAdvert = deepClone(leftTopAdvert.iframe) || ''
        this.iframeUrl.rightTopAdvert = deepClone(rightTopAdvert.iframe) || ''
        this.iframeUrl.rightBottomAdvert = deepClone(rightBottomAdvert.iframe) || ''
        const currentData = { content: advertContent || '', textType: advertContentType || 'ordinary' }
        this.$set(this, 'advertContentObj', deepClone(currentData))
      } else {
        this.sessionWindowForm = deepClone(sessionWindowFormTem)
      }
    })
  }

  private mounted () {
    const config = this.$store.state.common.initConfig
    this.initConfig = config ? config.qiniuDomainMap.im : ''
    this.$bus.$on('styleEditSessionWindow', (res: SessionWindowObj) => {
      if (res) {
        this.setSessionWindowData(res)
      } else {
        this.setSessionWindowData()
      }
    })
  }

  private beforeDestroy () {
    this.$bus.$off('styleEditSessionWindow')
  }
}
</script>
<style lang="stylus" scoped>
  .sessionWindowBox
    height 100%
    .V7_iconV7tubiao_bangzhu-42
      font-size 12px
      cursor pointer
    .previewOutBox
      height calc(100% - 38px)
      width 100%
      display flex
      flex-direction column
      justify-content center
    .previewBox
      height 100%
      width 100%
      max-height 524px
      box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
      margin 0 auto
      overflow-y auto
      border-radius 6px
      .header
        clear both
        overflow hidden
        width 100%
        border-radius 6px 6px 0px 0px
        padding 15px 0px 15px 15px
        .headerImg
          float left
          .icon
            width 40px
            height 40px
            line-height 30px
            background-color #71ADEF
            border-radius 50%
        .HeadTitle
          float left
          margin-left 10px
          color #fff
        .HeadTitle p:first-child
          font-size 14px
        .headBtn
          float right
          margin-top -9px
          color #fff
          font-size 16px
        .headBtn span
          padding-right 10px
      .middle
        height calc(100% - 96px)
        .advertBox
          height 100%
          width 150px
          background #F3F5F7
          text-align center
          position relative
          .leftAdvertBox
            position absolute
            left 25%
            top 50%
          .advertImgBox
            height 100%
            width 100%
          .advertRightTopBox
            height 66.66%
            >>> .el-carousel
              height 100%
            .rightTopEmptyBox
              position absolute
              top 30%
              left 25%
          .advertRightBottomBox
            height 33.33%
            background #E9EEF2
            >>> .el-carousel
              height 100%
            .rightBottomEmptyBox
              position absolute
              top 80%
              left 25%
          .iframe
            height 100%
            width 100%
        .container
          height calc(100% - 100px)
          border-bottom 1px solid #E6EAED
          overflow-y auto
          .msg
            clear both
            overflow hidden
            div
              margin-bottom 4px
              padding 10px
              .headImg
                vertical-align middle
                width 30px
                height 30px
                border-radius 50%
                border 1px solid $border-main
            .systemMsg
              text-align center
              color #B3B9C7
            .inBox
              margin-left 5px
              background-color #EFEFEF
              max-width calc(100% - 100px)
              border-radius 4px 10px 10px 10px
              vertical-align middle
              line-height 25px
            .outBox
              line-height 25px
              margin-right 5px
              vertical-align middle
              border-radius 10px 4px 10px 10px
              color #fff
        .sendMsg
          padding 5px 10px 10px 10px
          color #B3B9C7
          .sendMsgBtn
            margin-bottom 13px
            span
              padding-right 10px
          .sendMsgBtn span:last-child
            float right
            padding-right 0px
          .sendBtn
            cursor pointer
            margin-bottom 20px
      .footer
        padding 6px
        background-color #F8F8F8
        text-align center
        color #686E84
        height 24px
        .logo
          vertical-align middle
          width 12px
          height 12px
          display inline-block
    .agentImg
      border-radius 50%
      display inline-block
      vertical-align middle
      width 40px
      height 40px
      margin-bottom 5px
    .agentImg.V7_iconfont
      font-size 40px
      color #008BEE
      line-height 40px
      vertical-align middle
    .upLoad
      display inline-block
      margin-left 10px
      span
        font-size 12px
        color #008BEE
    .colorIpt
      display inline-block
      width 80px
      margin-left 10px
      vertical-align middle
    .colorChoose
      vertical-align middle
    .defaultHeadColor
      background-image linear-gradient(to right, #2076F1 , #2D91F5, #2076F1)
    .prompt
      color #767E91
    .advertImgContent
      position relative
      margin-right 5px
      cursor pointer
      .advertImgBox
        height 68px
        width 68px
        border 1px solid $border-main
        border-radius 4px
        text-align center
        line-height 60px
        display inline-block
        vertical-align middle
        .iconV7tubiao_xinzeng
          color #A6A6AE
      .advertEdit
        position absolute
        width 68px
        height 68px
        background rgba(0, 0, 0, 0.3)
        top 1px
        left 1px
        border-radius 4px
        display none
        text-align center
        .editUrl
          width 30px
          height 20px
          line-height 20px
          background rgba(0, 0, 0, 0.6)
          margin 40px 0px 0px 20px
          color #fff
          border-radius 2px
        .closeImg
          color #fff
          font-size 12px
          margin-right 5px
    .advertSettingBox
      background #FAFAFA
      padding 6px 10px 16px 10px
      border 1px solid $border-main
      border-radius 4px
    .advertUpLoad
      text-align center
      padding-top 5px
      width 70px
      height 70px
      background #FFFFFF
      border 1px solid $border-main
      border-radius 4px
      .V7_iconV7tubiao_xinzeng
        font-size 16px
      span
        color #A6A6AE
        font-size 12px
        display block
  .advertImgContent:hover .advertEdit
    display block
  .tip-span
    color #B3B9C7
  .openWayImg
    width 100px
    height 60px
  .selfRadio
    margin-right 60px !important
  .imgUploadTip
    font-size 12px
    color #767E91
    margin-left -10px
  .delImg
    font-size 12px
    color #FC6B5C
    margin-left 9px
    display inline-block
    cursor pointer
  .adviceColor
    color #767E91
  .line
    width 1px
    height 9px
    background #008BEE
    margin-left 9px
    opacity 0.3
    display inline-block
</style>
<style lang="stylus">
.sessionWindowBox
  .el-carousel
    height 100%
    .el-carousel__container
      height 100%
  .el-radio
    margin-right 10px
</style>
